<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>I'm QQ - 每一天，乐在沟通</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/base.js"></script>
</head>
<body>
    <!-- 头部开始 -->
    <header class="header" id="header">
        <div class="head-body">
            <div class="logo">
                <img src="img/logo.png" alt="">
            </div>
            <!-- 首页三个开始 -->
            <ul>
                <li>首页</li>
                <li>下载</li>
                <li>动态</li>
            </ul>
            <!-- 首页三个结束 -->
            <ol>
                <li>注册</li>
                <li>QQ会员</li>
                <li>QQ安全</li>
                <li>登陆</li>
            </ol>
        </div>
    </header>
    <!-- 头部结束 -->
    <!-- banner开始 -->
    <div class="banner">
        <!-- 轮播图第一个内容开始 -->
        <div class="banner-one" id="ban-one">
            <div class="banner-one-body">
                <div class="w600">
                    <h1></h1>
                    <a href="javascript:;"></a>
                </div>
                <div class="w800"></div>
                <div class="w1349"></div>
            </div>
        </div>
        <!-- 轮播图第一个内容结束 -->
        <!-- 轮播图第二个内容开始 -->
        <div class="banner-two" id="ban-two">
            <div class="bck-top"></div>
            <div class="bck-bottom"></div>
            <div class="bck-center"></div>
        </div>
        <!-- 轮播图第二个内容结束 -->

        <!-- 两个按钮开始 -->
        <button class="button-one" id="one"></button>
        <button class="button-two" id="two"></button>
        <!-- 两个按钮结束 -->
    </div>
    <!-- banner结束 -->
    <!-- iq 每一天开始 -->
    <div class="content"></div>
    <!-- iq 每一天结束 -->
    <!-- 背景定位第一个开始 -->
    <div class="back-one"></div>
    <!-- 背景定位第一个结束 -->
    <!-- 手机沟通开始 -->
    <div class="sound">
        <div class="sound-body">
            <div class="bck-let"></div>
            <!-- 右面的内容开始 -->
            <div class="bck-rgt">
                <h2></h2>
                <p>
                    无论何时何地，你都能自由享受QQ在各类终端<br>
                    上带来的高清通话，与好友一起想聊多久聊多久
                </p>
                <a href="javasvript:;">了解更多>></a>
                <br>
                <ul>
                    <li>两人、多人通话</li>
                    <li>群组通话</li>
                    <li>屏幕分享</li>
                </ul>
            </div>
            <!-- 右面的内容结束 -->
        </div>
    </div>
    <!-- 手机沟通结束 -->
    <!-- 背景定位第二个开始 -->
    <div class="back-two"></div>
    <!-- 背景定位第二个结束 -->
    <!-- 接收沟通开始 -->
    <div class="receive">
        <div class="receive-body">
            <!-- 右面的内容开始 -->
            <div class="bck-rgt">
                <h2></h2>
                <p>
                    通过QQ,电脑和手机上的文件都能收发自如，<br>
                    更有手机在线查阅，轻松你的工作和生活。
                </p>
                <a href="javasvript:;">了解更多>></a>
                <br>
                <ul>
                    <li>文件漫游</li>
                    <li>多端互传</li>
                    <li>在线预览</li>
                </ul>
            </div>
            <!-- 右面的内容结束 -->
            <div class="bck-let"></div>
        </div>
    </div>
    <!-- 接收沟通结束 -->
    <!-- 背景定位第三个开始 -->
    <div class="back-san"></div>
    <!-- 背景定位第三个结束 -->
    <!-- 青春沟通开始 -->
    <div class="youth">
        <div class="youth-body">
            <div class="bck-let">
               <ul>
                   <li></li>
                   <li></li>
                   <li></li>
               </ul>
            </div>
            <!-- 右面的内容开始 -->
            <div class="bck-rgt">
                <h2></h2>
                <p>
                    即使世界很大，你也不会孤单，在兴趣部落 <br>
                    有和你一样的人，期待着和你一起发现精彩
                </p>
                <a href="javasvript:;">了解更多>></a>
                <br>
                <ul>
                    <li>两人、多人通话</li>
                    <li>群组通话</li>
                    <li>屏幕分享</li>
                </ul>
            </div>
            <!-- 右面的内容结束 -->
        </div>
    </div>
    <!-- 青春沟通结束 -->
    <!-- 底部版权开始 -->
    <div class="bottom">
        <div class="bottom-body">
            <!-- 左边的通讯工具开始 -->
            <div class="bck-lft">
                <h3>了解热门产品</h3>
                <ul>
                    <li>
                        QQ手机版
                    </li>
                    <li>QQPC版</li>
                    <li>QQ Mac版</li>
                    <li>QQ Pad版</li>
                </ul>
            </div>
            <!-- 左边的通讯工具结束 -->
            <div class="bck-rht">
                <ul>
                    <li>QQ安全</li>
                    <li>安全中心</li>
                    <li>冻结账号</li>
                    <li>举报恶意行为</li>
                    <li>恢复好友和群</li>
                    <li>注销账号</li>
                </ul>
                <ul>
                    <li>帮助反馈</li>
                    <li>腾讯客服</li>
                    <li>反馈问题</li>
                    <li>腾讯微博</li>
                    <li>新浪微博</li>
                </ul>
                <ul>
                    <li>友情链接</li>
                    <li>兴趣部落</li>
                    <li>QQ群</li>
                    <li>QQ音乐</li>
                    <li>QQ浏览器</li>
                    <li>腾讯视频</li>
                    <li>腾讯体验中心</li>
                    <li>腾讯电脑管家</li>
                </ul>
                <ol>
                    <li>TIM</li>
                    <li>腾讯文档</li>
                    <li>微云</li>
                    <li>腾讯云</li>
                </ol>
            </div>
        </div>
        <p class="font-one">Copyright © 1998-2020 Tencent. All Rights Reserved.</p>
        <p class="font-two">腾讯公司 版权所有</p>
    </div>
    <!-- 底部版权结束 -->
</body>
</html>